@charset "utf-8";

@import "common";

.web {
  .header_nav_logo {
    margin-top: 49px;
    .carousel-inner {
      .item {
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
  }
  .engine_box {
    padding-top: 104px;
    background: #fbfaf7;
    border-bottom: 1px solid #eaeaea;
    .engine_bg_box {
      //   background: url(../img/sy_tu5.jpg) no-repeat top 34px right;
      .engine_content_box {
        h1 {
          color: #0078d7;
          font-size: 48px;
          font-weight: bold;
        }
        h2 {
          color: #666666;
          font-size: 30px;
          margin: 33px 0 80px;
        }
        .engine_text_box {
          .engine_flex {
            margin: 2% 0;
            display: flex;
            justify-content: space-around;
            .img_box {
              width: 64px;
              height: 64px;
              background: $index_color;
              border-radius: 6%;
              overflow: hidden;
              text-align: center;
              line-height: 64px;
              img {
                height: 80%;
              }
            }
            .text_box {
              width: 72%;
              p {
                font-size: 20px;
                color: #333333;
              }
              span {
                font-size: 14px;
                color: #666666;
              }
            }
          }
        }
      }
    }
    .engine_content_tu {
      padding-top: 34px;
      img {
        height: 100%;
      }
    }
  }
  .advantage_box {
    padding: 89px 0;
    .advantage_content_tu {
      padding: 101px 0 0;
      img {
        width: 100%;
      }
    }
    .advantage_content_box {
      h1 {
        font-size: 48px;
        color: #8fc31f;
        padding: 5px 0 35px;
      }
      ul {
        list-style: none;
        li {
          vertical-align: middle;
          padding: 8px 0;
          .advantage_imgbox {
            display: inline-block;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: #8fc31f;
            text-align: center;
            line-height: 54px;
            img {
              width: 55%;
            }
          }
          span {
            font-size: 14px;
            color: #666666;
          }
        }
      }
    }
  }
  .product_box {
    padding: 54px 0 102px;
    background: $index_color;
    .product_bg_box {
      h1 {
        padding: 40px 0 60px;
        font-size: 48px;
        color: #ffffff;
        text-align: center;
      }
      div {
        margin: 10px 0;
        vertical-align: middle;
        .product_imgbox {
          width: 66px;
          height: 66px;
          border-radius: 6px;
          overflow: hidden;
          display: inline-block;
          img {
            width: 100%;
          }
        }
        .product_textbox {
          color: white;
          display: inline-block;
          box-sizing: border-box;
          padding-left: 50px;
          width: 70%;
          text-align: justify;
          p {
            font-size: 32px;
          }
          span {
            font-size: 14px;
          }
        }
      }
    }
  }
  .game_box {
    padding: 40px 0;
    .game_bg_box {
      h1 {
        font-size: 34px;
        color: #2a2a2a;
        display: flex;
        justify-content: space-between;
        padding: 25px 0 35px;
        a {
          color: #2a2a2a;
          font-size: 14px;
        }
      }
      video {
        width: 100%;
      }
      .game_content_box {
        .game_one {
          margin: 10px 0;
          .game_tubox {
            width: 100%;
            overflow: hidden;
            img {
              width: 100%;
            }
          }
          p {
            width: 100%;
            font-size: 14px;
            text-align: center;
            margin: 6px 0;
            overflow: hidden;
            white-space: nowrap;
          }
        }
      }
    }
  }
  .cooperation_box {
    background: #f4f4f4;
    padding: 20px 0;
    h1 {
      font-size: 30px;
      color: #2a2a2a;
      span {
        font-size: 11px;
        color: #777777;
      }
    }
    .cooperation_bg_box {
      .cooperation_tubox {
        width: 100%;
        border-radius: 6px;
        overflow: hidden;
        border: 1px solid #dddddd;
        background: #ffffff;
        margin: 10px 0;
        img {
          width: 100%;
        }
      }
    }
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .web {
    .container {
      padding: 0;
      margin: 0;
    }
    // .header_nav .img_box {
    //   display: none;
    // }
    .engine_box .engine_content_tu {
      position: absolute;
      top: 50px;
      left: 70%;
      height: 40%;
    }
    .advantage_box .advantage_content_tu img {
      position: absolute;
      top: 120px;
      left: 50%;
      width: 50%;
    }
    .product_box .product_bg_box div {
      margin: 10px 26px;
      vertical-align: middle;
    }
  }
}

@media only screen and (max-width: 767px) {
  .web {
    .engine_box {
      padding-top: 20px;
    }
    .engine_box .engine_content_tu {
      display: none;
    }
    .engine_box .engine_bg_box .engine_content_box h2 {
      margin: 20px 0 30px;
    }
    .advantage_box {
      padding: 20px 0;
    }
    .advantage_box .advantage_content_box h1 {
      font-size: 46px;
      padding: 5px 0 15px;
    }
    .advantage_box .advantage_content_tu {
      display: none;
    }
    .advantage_box .advantage_content_box ul {
      list-style: none;
      padding: 0;

      text-align: justify;
    }
    .advantage_box .advantage_content_box ul li span {
      font-size: 14px;
      color: #666666;
      margin-left: 6px;
    }
  }
}
